<v-container fluid grid-list-md text-xs-center v-show="show" style="background: #FAFAFA">
  <v-layout row wrap>
    <v-flex xs12 style="display: flex">
      <template v-for="(group, i) in scripts">
        <fast-button class="headline" :color="type == i?'primary':''" :outline="type == i" flat block style="text-transform:none; min-width: 0%; min-height: 0%; margin: 0%; padding: 0%; height: 2em; flex: 1" @tap="type = i;init();">
          {{type==i?(progress != 0?'':script.name):group.name}}
          <v-icon large v-show="type == i && (progress != 0)">replay</v-icon>
        </fast-button>
      </template>
    </v-flex>
    <v-flex xs12>
      <v-text-field outline single-line hide-details class="headline" :append-icon="exp==script.exp?'':'settings_backup_restore'" @click:append="exp=script.exp" v-model="exp"></v-text-field>
    </v-flex>
    <v-flex xs12 style="padding-left: 5%; padding-right: 5%">
      <v-slider style="margin: 0%" readonly hide-details thumb-label="false" ticks="always" v-model="progress" :max="actions.length"></v-slider>
    </v-flex>
    <v-flex xs2.4>
      <v-btn icon large @mousedown="indexDown(-1)" @mouseup="indexUp(-1)" @mouseleave="indexUp(-1)" @touchstart.stop.prevent="indexDown(-1)" @touchend.stop.prevent="indexUp(-1)" style="margin: 0%; padding: 0%;">
        <v-icon large>skip_previous</v-icon>
      </v-btn>
    </v-flex>
    <v-flex xs2.4>
      <fast-button icon large :disabled="progress==0" @tap="backward" style="margin: 0%; padding: 0%;">
        <v-icon large>fast_rewind</v-icon>
      </fast-button>
    </v-flex>
    <v-flex xs2.4>
      <fast-button icon large :disabled="progress == actions.length" @tap="toggle" style="margin: 0%; padding: 0%;">
        <v-icon large>{{playing?'pause':'play_arrow'}}</v-icon>
      </fast-button>
    </v-flex>
    <v-flex xs2.4>
      <fast-button icon large :disabled="progress == actions.length" @tap="forward" style="margin: 0%; padding: 0%;">
        <v-icon large>fast_forward</v-icon>
      </fast-button>
    </v-flex>
    <v-flex xs2.4>
      <v-btn icon large @mousedown="indexDown(1)" @mouseup="indexUp(1)" @mouseleave="indexUp(1)" @touchstart.stop.prevent="indexDown(1)" @touchend.stop.prevent="indexUp(1)" style="margin: 0%; padding: 0%;">
        <v-icon large>skip_next</v-icon>
      </v-btn>
    </v-flex>
  </v-layout>
</v-container>